<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<link
			rel="stylesheet"
			href="./lib/bootstrap-4.3.1/dist/css/bootstrap.css"
		/>
		<title>Document</title>
		<style></style>
	</head>

	<body>
		<div id="app">
			<!-- 父组件 可以在引用子组件的时候 通过属性绑定（v-bind） 的形式 把
        需要传递给自组件的数据，以组件绑定的形式 传递到自组件内部 供子组件使用
       -->
			<com1 v-bind:parentmsg="msg"></com1>
			<com2 @show="show"></com2>

      <comment-box @func="loadComments"></comment-box>
      
			<ul class="list-group">
				<li class="list-group-item" v-for="item in list" :key="item.id">
					<span>评论人：{{ item.user }}</span>
					{{ item.content }}
				</li>
			</ul>
		</div>

		<template id="tmpl">
			<div>
				<h1>这是自组件</h1>
				<input
					type="button"
					value="这是自组件中的按钮-点击它，
        触发 父组件中传递过来的show方法"
					@click="myclick"
				/>
			</div>
		</template>
		<template id="tmpl2">
			<div>
				<div class="form-group">
					<label>评论人：</label>
					<input type="text" class="form-control" v-model="user"/>
				</div>
				<div class="form-group">
					<label>评论内容：</label>
					<textarea class="form-control" v-model="content"></textarea>
				</div>
				<div class="form-group">
					<input
						type="text"
						value="发表评论"
						class="btn btn-primary"
						@click="postComment"
					/>
				</div>
			</div>
		</template>

		<script>
			var commentBox = {
        template: "#tmpl2",
        data(){
          return{
            user: '',
            content: ''
          }
        },
				methods: {
					postComment() {
            console.log("post");
            /**分析：发表评论的业务逻辑
             * 1.评论数据存到哪里去？？？ 存放到了 localstroage 中 localstorage.setItem
             * （‘cmt’，‘’）
             * 2.先组织出一个最新的评论数据对象
             * 3.想办法，把 第二步中，得到的评论对象，保存到localstorage中：
             *  3.1 localstorage只支持存放字符串数据，要先调用JSON.stringify
             *  3.2 在保存 最新的 评论数据之前 要先从localstorage获取到之前的评论数据(string)
             *  转换为一个 数据对象，然后 把最新的评论 push到这个数组
             *  3.3如果获取到的localstorage中的评论字符串 为空或不存在，则 可以返回
             * 一个‘【】’ 让JSON.parse()去转换
             *  3.4 把最新的评论列表数组再次调用JSON.stringify转为 数组字符串 然后调用
             * localstorage.setItem()
             * 
            */
           var comment = {id: Date.now(),user: this.user,content: this.content}
           var list = JSON.parse(localStorage.getItem('cmts') || '[]')
           list.unshift(comment)
           localStorage.setItem('cmts', JSON.stringify(list))
           this.user = this.content = ''
           this.$emit('func')
					}
				}
			};
			var com2 = {
				template: "#tmpl",
				data() {
					return {
						sonmsg: { name: "小头儿子", age: 6 }
					};
				},
				methods: {
					myclick() {
						//emit 触发
						this.$emit("show", this.sonmsg);
					}
				}
			};
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "123 啊-父组件中的数据",
					datamsgFromSon: null,
					list: [
						{ id: Date.now(), user: "李白", content: "天生我材必有用" },
						{ id: Date.now(), user: "江小白", content: "劝君更尽一杯酒" },
						{
							id: Date.now(),
							user: "小马",
							content: "我姓马，风吹草低见牛羊的马"
						}
					]
        },
        created() {
          this.loadComments()
        },
				methods: {
					show(data) {
						this.datamsgFromSon = data;
          },
          loadComments(){
            var list = JSON.parse(localStorage.getItem('cmts') || '[]')
            this.list = list;
          }
				},
				components: {
					//结论： 经过演示，发现 子组件中，默认无法访问到 父组件中的data上的数据 和methods中的方法
					com1: {
						//
						data() {
							return {
								title: "123",
								content: "qqq"
							};
						},
						template: '<h1 @click="change">这时子组件{{parentmsg}}</h1>',
						props: ["parentmsg"],
						directives: {},
						filters: {},
						componets: {},
						methods: {
							change() {}
						}
					},
					com2: com2,
					commentBox
				}
			});
		</script>
	</body>
</html>
